<template>
    <div class="boxs-bov">
      <div class=" top_some">
          <el-input
          v-model.trim="formInline.username"
                  placeholder="管理员名称"
                  style="width: 100%"
                  clearable
                  @clear="search"
                ></el-input>
        <el-button type="primary"   @click="search"  >搜索</el-button>
      </div> 
  
      <div >
        <el-card class="box-card" v-for="(item,index ) in tableData" :key="index">
          <div>
            <div class="text_item">
              <span class="text_1">姓 名：</span>
              <span>{{item.username}}</span>
            </div>
            <div class="text_item">
              <span class="text_1">手机号：</span>
              <span>{{item.mobile}}</span> 
            </div>
            <div class="text_item">
              <span class="text_1">督课权限：</span>
              <span>{{item.is_qstatus==2?"是":"否"}}</span> 
            </div> 
          </div>
  
          <div class="clearfix"> 
            <el-link type="info">{{formatDateTime(item.updatetime)}}</el-link>
  
            <div v-if="authority([3])"> 
            <el-link type="primary" style="margin-right: 10px" @click="handleEdit(item, 'edit')">编辑</el-link>
            <el-link type="danger" @click="handleEdit(item,'delete')">删除</el-link>
  
            </div>
            
          </div>
        </el-card>
        
      </div>
      <!-- 底部添加按钮样式 -->
      <BottomAdd  v-if="authority([3])" >
          <el-button @click="addModule" :icon="`Plus`" type="primary" style="width: 100%;height: 40px;"
              >添加</el-button
            >
      </BottomAdd>
      <div style="height: 22vh" v-if="authority([3])"></div>
      <!-- <div style="height: 10vh" v-else></div> -->

      <AddModuleGoodsType  ref="addModuleFlag"
        @refreshData="refreshData" />
    </div>
  </template>
  
  <script>
  import Pagination from "@/components/Pagination.vue";
  import { dateFormats } from "@/utils/util";
  import { rstaffList, rstaffDel, adminGroup } from "@/api/api";
  import XEUtils from "xe-utils";
  import { setStorage, getStorage } from "@/utils/util";
  
  import AddModuleGoodsType from "./components/add.vue";
  import { lyMixins } from "@/mixins/mixins";
  import dayjs from "dayjs";
  import BottomAdd from "@/components/bottom_add.vue";
  export default {
      components: {
      AddModuleGoodsType,
      Pagination,
      BottomAdd
    },
    data() {
      return {
        isFull: false,
        loadingPage: false,
        // 选项框选中数组
        ids: [],
  
        // 选项框非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        formInline: {
          page: 1,
          page: 1,
          per_page: 9999,
        },
        pageparm: {
          page: 1,
          per_page: 9999,
          total: 0,
        },
        statusList: [
          { id: 1, name: "正常" },
          { id: 0, name: "禁用" },
        ],
        timers: [],
        tableData: [],
        selectData: [],
        GroupList: [], //管理员分组列表
      };
    },
    methods: {
      authority(groupArr = [0]) {
        // 权限筛选
        let userInfo = this.userInfo;
        // 当前权限和传来的权限组进行对比
        if (groupArr.some((item) => Number(item) === userInfo)) return true;
        return false;
      },
      formatDateTime(time) {
        return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
      },
      refreshData(x) {
        // 新增成功 搜索归0
        if (x) this.handleEdit("", "reset");
        else this.getData();
      },
      setFull() {
        this.isFull = !this.isFull;
        window.dispatchEvent(new Event("resize"));
      },
      // 表格序列号
      getIndex($index) {
        // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
        return (this.pageparm.page - 1) * this.pageparm.per_page + $index + 1;
      },
      //多选项框被选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 批量删除按钮操作 */
      handleDelete(row) {
        const ids = this.ids;
        let vm = this;
        vm.$confirm("是否确认删除选中的数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(function () {
          return rstaffDel({ id: ids }).then((res) => {
            if (res.code == 1) {
              vm.$message.success(res.msg);
              vm.search();
            } else {
              vm.$message.warning(res.msg);
            }
          });
        });
      },
      changeStatus(row) {
        console.log(row, "row----");
      },
      addModule() { 
        this.$refs.addModuleFlag.addModuleFn(null, "新增", this.GroupList);
      },
      handleEdit(row, flag) {
        if (flag == "detail") {
          this.$refs.addModuleFlag.addModuleFn(row, "详情", this.GroupList);
        } else if (flag == "edit") {
          this.$refs.addModuleFlag.addModuleFn(row, "编辑", this.GroupList);
        } else if (flag == "delete") {
          let vm = this;
          vm.$confirm("您确定要删除选中的数据吗？", {
            closeOnClickModal: false,
          })
            .then((res) => {
              rstaffDel({ id: row.id }).then((res) => {
                if (res.code == 1) {
                  vm.$message.success(res.msg);
                  vm.search();
                } else {
                  vm.$message.warning(res.msg);
                }
              });
            })
            .catch(() => {});
        } else if (flag == "reset") {
          this.formInline = {
            page: 1,
            per_page: 10,
          };
          this.pageparm = {
            page: 1,
            per_page: 10,
            total: 0,
          };
          this.getData();
        }
      },
  
      callFather(parm) {
        this.formInline.page = parm.page;
        this.formInline.per_page = parm.per_page;
        this.getData();
      },
      search() {
        this.formInline.page = 1;
        this.formInline.per_page = 10;
        this.getData();
      },
      //获取列表
      async getData() {
        this.loadingPage = true;
        rstaffList(this.formInline).then((res) => {
          this.loadingPage = false;
          if (res.code == 1) {
            this.tableData = res.data.data;
            // // 将列表数据转换为树形数据
            // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
            this.pageparm.page = res.data.current_page;
            this.pageparm.per_page = res.data.per_page;
            this.pageparm.total = res.data.total;
          }
        });
      },
  
      timeChange(val) {
        if (val) {
          this.formInline.beginAt = dateFormats(val[0], "yyyy-MM-dd hh:mm:ss");
          this.formInline.endAt = dateFormats(val[1], "yyyy-MM-dd hh:mm:ss");
        } else {
          this.formInline.beginAt = null;
          this.formInline.endAt = null;
        }
        this.search();
      },
      getGroupList() {
        // 管理员分组获取
        adminGroup().then((res) => {
          if (res.code == 1) {
            //console.log(res, "------------成功获取到管理员分组列表");
            this.GroupList = res.data;
          }
        });
      },
    },
    created() {
      this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
  
      // 获取管理员分组
      // this.getGroupList();
      // 数据获取
      this.getData();
    },
  };
  </script>
  
  <style>
  .top_some{
      display: flex;
  }
  .boxs-bov {
    padding: 0 10px;
    box-sizing: border-box;
  }
  .text {
    font-size: 14px;
  }
  
  .item {
    margin-bottom: 18px;
  }
  
  .clearfix:before,
  .clearfix:after {
    /* display: table; */
    /* content: ""; */
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding-top:10px ;
  }
  .box-card {
    width: 100%;
    margin-top: 20px;
  }
  .text_1{
      width: 80px;
  }
  .text_item{
      line-height: 30px;
      font-size: 16px;
  }
  .clearfix{
      font-size: 14px;
  }
  </style>
   